<template>
  <view class="news-item" @click="goToNewsPage">
    <image :src="news.coverImage" mode="aspectFill"></image>
    <view class="news-title">{{ news.title }}</view>
  </view>
</template>

<script>
export default {
  props: {
    news: {
      type: Object,
      default: () => ({
        coverImage: '',
        title: '',
        url: ''
      })
    }
  },
  methods: {
    goToNewsPage() {
      if (this.news.url) {
        uni.navigateTo({
          url: `/pages/webview?url=${encodeURIComponent(this.news.url)}`
        });
      }
    }
  }
};
</script>

<style scoped>
.news-item {
  margin-bottom: 20px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.news-item image {
  width: 100%;
  height: 200px;
}

.news-title {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
</style>    